<template>
  <div class="bg">
    <div>
      <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" label-width="100px" label-position="left">
        <span id="title">{{ this.MyData.title }}</span>
        <el-form-item label="用户名" prop="username">
          <el-input prefix-icon="el-icon-user" v-model="registerForm.username" clearable placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input prefix-icon="el-icon-goods" type="password" v-model="registerForm.password" clearable show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="psword">
          <el-input prefix-icon="el-icon-goods" type="password" v-model="registerForm.psword" clearable show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="验证码" class="vericode"  prop="vercode">
          <el-input prefix-icon="el-icon-coordinate" v-model="registerForm.vercode" clearable placeholder="请输入验证码"/>
          <img :src="verifyurl" width="100px" height="40px" v-on:click="sendSms()" :alt="this.verify">
        </el-form-item>
        <el-row>
          <el-button type="primary" @click="Register" plain>注册</el-button>
          <el-button type="info" @click="resetRegistForm" plain>重置</el-button>
        </el-row>
        <el-row class="register">
          <router-link :to="{ name: 'login' }"><el-button type="text">已有账号，去登录…</el-button></router-link>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import qsp from 'qs'
import { nemoMD5 } from '../../assets/js/md5.js'

export default {
  name: 'Login',
  data () {
    const addPass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.registerForm.psword !== '') {
          this.$refs.registerFormRef.validateField('psword')
        }
        callback()
      }
    }
    const addPass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      registerForm: {
        username: '',
        password: '',
        psword: '',
        vercode: ''
      },
      // 这是表单的验证规则
      registerRules: {
        // 验证用户名是否合法
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        // 验证密码是否合法
        password: [
          {
            required: true,
            validator: addPass1,
            trigger: 'blur'
          },
          {
            required: true,
            min: 6,
            message: '密码长度不得少于6位',
            trigger: 'blur'
          }
        ],
        psword: [
          {
            required: true,
            validator: addPass2,
            trigger: 'blur'
          },
          {
            required: true,
            min: 6,
            message: '密码长度不得少于6位',
            trigger: 'blur'
          }
        ],
        vercode: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      },
      // 生成的验证码
      verify: '',
      verifyurl: ''
    }
  },
  created () {
    this.sendSms()
  },
  methods: {
    // 点击重置按钮，重置登录表单
    resetRegistForm () {
      this.$refs.registerFormRef.resetFields()
      this.sendSms()
    },
    // 验证码 图片
    sendSms () {
      const code = ['q', 'w', 'e', 'r', 't', 'y', 'u', 'p', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '1', '2', '3', '4', '5', '6', '7', '8', '9']
      const url = 'http://www.webxml.com.cn/WebServices/ValidateCodeWebService.asmx/enValidateImage?byString='
      this.verify = code[Math.floor(Math.random() * 32)] + code[Math.floor(Math.random() * 32)] + code[Math.floor(Math.random() * 32)] + code[Math.floor(Math.random() * 32)]
      this.verifyurl = url + this.verify
      console.log(this.verify)
    },
    async Register () {
      if (this.registerForm.vercode === this.verify) {
        await this.$refs.registerFormRef.validate(async valid => {
          if (!valid) return
          // 跳过接口
          // console.log('登录事件')
          // 加密
          const ps = nemoMD5(this.registerForm.password)
          this.registerForm.password = ps
          const { data: res } = await this.$http.post('user/register', qsp.stringify(this.registerForm))
          if (res.code !== 200) return this.$message.error(res.msg)
          this.$message.success(res.msg)
          // 2.通过链式编程导航跳转到后台主页，路由地址/home
          await this.$router.push('/login')
        })
        this.resetRegistForm()
      } else {
        this.$message.error('验证码错误，请重新输入！')
        this.registerForm.vercode = ''
        this.sendSms()
      }
    }
  }
}
</script>

<style scoped>
.bg{
  background: url("../../assets/images/backgroud.png") no-repeat center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#title{
  position: relative;
  top: -100px;
  left: 80px;
  font-size: 35px;
  color: white;
}
.el-form{
  width: 360px;
  margin-right: 20px;
  padding: 20px 60px;
  border-radius: 5px;
  border: 2px solid rgba(249, 244, 244, 0.79);
}
.el-row{
  display: flex;
  justify-content: center;
}
.el-row .el-button{
  margin: 0 30px;
}
::v-deep .el-form-item__label{
  color: white;
  font-size: 15px;
  font-weight: bolder;
}
.vericode .el-input{
  width: 150px;
}
.el-form img{
  position: absolute;
  left: 160px;
}
.register{
  margin: 15px 0 15px 0;
  display: flex;
  justify-content: right;
  position: relative;
}
.register .el-button{
  position: relative;
  right: -40px;
  color: white;
}
.el-button--text span{
  color: white;
}
</style>
